<template>
  <filePreview
    ref="filePreview"
    :type="viewer.type"
    :visible="viewer.visible"
    :pics="viewer.pics"
    @close="viewer.visible = false"
  />
  <ProTable
    ref="fileRef"
    :request-auto="false"
    :pagination="false"
    :columns="fileData.columns"
    :init-param="fileData.initParam"
    :request-api="fileList"
    :change-search-params="changeSearchParams"
  >
    <template #tableHeader>
      <GlobalButton :button-list="fileData.headButtonList"></GlobalButton>
    </template>

    <template #operation="{ row }">
      <GlobalButton :button-list="fileData.rowButtonList" :row-params="row"></GlobalButton>
    </template>
  </ProTable>

  <DialogForm
    :options="addFileForm.options"
    :title="addFileForm.title"
    :form-attrs="addFileForm.formAttrs"
    v-model:visible="addFileForm.visible"
    @get-model="(form: InterfaceFile.ReqUploadFile) => (addFileForm.form = form)"
    @submit-form="saveAddFileForm"
  >
    <template #formBottom>
      <div class="file ml100">
        <el-upload
          ref="uploadRef"
          :headers="fileObj.headers"
          :data="fileObj.uploadingData"
          action="/basic/file/v1/uploadFile"
          name="file"
          :auto-upload="false"
          :limit="1"
          :accept="fileObj.acceptSuffix"
          :before-upload="fileBeforeUpload"
          :on-success="onSuccess"
          :on-change="onChange"
          :file-list="fileObj.fileList"
          :on-exceed="onExceed"
        >
          <el-button size="small" type="primary"> <SvgIcon class="mr5 icon" name="svg-uploading"></SvgIcon>附件上传 </el-button>
        </el-upload>
      </div>
    </template>
  </DialogForm>
</template>
<script setup lang="ts" name="FileData">
import { ProTableInstance } from '../ProTable/interface';
import { useFileData } from './hooks/use-fileData';
import { fileList } from '$api/basic/file';
import { InterfaceFile } from '@/api/interface/basic/file';

export interface FileDataProps {
  // 当前数据id
  fileId: number | '';
  // 存储桶名称
  bucketName: string;
  // 存放区域
  area: string;
  // 字典code
  dictionariesCode: string;
  // 错误提示消息
  errorMessage?: string;
  // 下载权限码
  downloadPermissionCode?: string;
  // 删除权限码
  deletePermissionCode?: string;
  // 上传权限码
  upLoadingPermissionCode?: string;
  // 文件预览
  previewPermissionCode?: string;
  // 是否显示文件列表
  visible?: boolean;
}
const props = withDefaults(defineProps<FileDataProps>(), {
  fileId: '',
  bucketName: '',
  area: '',
  visible: true
});

const $emit = defineEmits(['update:visible']);

watch(
  () => props.fileId,
  val => {
    if (val) init();
  }
);

onBeforeMount(() => {
  init();
});

/** 初始化 */
const init = async () => {
  addFileForm.transitionArr[0].oldField = props.dictionariesCode;
  await setDictionaries(addFileForm, true);
  const children = formGetChildren(addFileForm, ['type']);

  nextTick(() => {
    if (!props.bucketName || !props.fileId || !props.area) {
      return;
    }

    const typeChildren = children.get('type');

    // 有可以查询的文件类型在显示
    if (typeChildren?.length) {
      Object.assign(fileData.initParam, {
        bucketName: props.bucketName,
        fileId: props.fileId,
        area: props.area
      });

      fileRef.value.searchParam.type = children.get('type')[0].value;
      tableSetChildrenEnum(fileData, children);
    } else {
      $emit('update:visible', false);
    }
  });
};

const fileRef = ref<ProTableInstance>();
const uploadRef = ref();
const { fileData, addFileForm, fileObj, viewer, changeSearchParams, onChange, fileBeforeUpload, onSuccess, onExceed } =
  useFileData(fileRef, props);

const closeFormLoading = () => {
  setTimeout(() => {
    globalStore.setGlobalState('formLoading', false);
    globalStore.formLoading = false;
  }, 100);
};
/**
 * @description: 附件提交
 * @param {*} form
 * @return {*}
 */
const globalStore = useGlobalStore();
const saveAddFileForm = (form: any) => {
  const { remark, type } = form;
  const { fileId, bucketName, area } = props;
  if (!fileObj.value.fileList.length) {
    elMessage('请先点击文件上传上传文件', 'warning');
    closeFormLoading();

    return;
  }
  if (!bucketName || !fileId || !area) {
    elMessage(props.errorMessage, 'warning');
    closeFormLoading();
    return;
  }
  Object.assign(fileObj.value.uploadingData, {
    remark: remark || '',
    type: `${type}&${props.dictionariesCode}`,
    fileId,
    bucketName,
    area
  });
  uploadRef.value.submit();
};
</script>
